<template>
	<view class="add-address-box">
		<view class="add-address">
			<u-list>
				<u-list-item>
					<view class="item">
						<u-icon name="map" size="24"></u-icon>
						<view class="address ">
							<u--input placeholder="地址" border="none" placeholderClass="placeholder" fontSize="18px"
								v-model="address.position"></u--input>
						</view>
						<u-icon name="arrow-right" size="24" class="right"></u-icon>
					</view>
				</u-list-item>
				<u-list-item>
					<view class="item">
						<u-icon name="home" size="24"></u-icon>
						<view class="address middle">
							<u--input placeholder="大楼" border="none" placeholderClass="placeholder" fontSize="18px"
								v-model="address.building"></u--input>
						</view>
					</view>
				</u-list-item>
				<u-list-item>
					<view class="item">
						<u-icon name="file-text" size="24"></u-icon>
						<view class="address middle">
							<u--input placeholder="门牌号" border="none" placeholderClass="placeholder" fontSize="18px"
								v-model="address.floorPlate"></u--input>
						</view>
					</view>
				</u-list-item>
				<u-list-item>
					<view class="item">
						<u-icon name="order" size="24"></u-icon>
						<view class="address middle">
							<u--input placeholder="姓名" border="none" placeholderClass="placeholder" fontSize="18px"
								v-model="address.name"></u--input>
						</view>
					</view>
				</u-list-item>
				<u-list-item>
					<view class="item">
						<u-icon name="phone" size="24"></u-icon>
						<view class="address middle">
							<u--input placeholder="电话号码" border="none" placeholderClass="placeholder" fontSize="18px"
								v-model="address.phone"></u--input>
						</view>
					</view>
				</u-list-item>
				<u-button text="确定" type="primary" shape="circle" @click="addAddress()"></u-button>
				<u-button text="取消" shape="circle" @click="back"></u-button>
			</u-list>
		</view>

	</view>
</template>

<script>
	import {
		reqAddAddress,
		reqUpdateAddress
	} from '@/common/api.js'
	export default {
		data() {
			return {
				address: {
					position: '',
					building: '',
					floorPlate: '',
					name: '',
					phone: ''
				}
			}
		},
		onLoad(option) {
		if(option.address != undefined) {
			this.address = JSON.parse(option.address)
			uni.setNavigationBarTitle({
				title:"修改地址"
			})
		}
		},
		methods: {
			// 新增或修改信息
			async addAddress() {
				const {
					address
				} = this
				if (address.id) {
					const res = await reqUpdateAddress(address)
					if (res.code == 200) {
						uni.showToast({
							title: "修改地址信息成功",
							icon: 'success'
						})
						uni.navigateTo({
							url: '/subpkg/myAddress/myAddress'
						})
					} else {
						uni.showToast({
							title: "修改地址信息失败",
							icon: 'error'
						})
					}
				} else {
					const res = await reqAddAddress(address)
					if (res.code == 200) {
						uni.showToast({
							title: "添加地址信息成功",
							icon: 'success'
						})
						uni.navigateTo({
							url: '/subpkg/myAddress/myAddress'
						})
					} else {
						uni.showToast({
							title: "添加地址信息失败",
							icon: 'error'
						})
					}
				}
			},
		
		// 取消按钮
		back() {
			uni.navigateTo({
				url:'/subpkg/myAddress/myAddress'
			})
		}
		}
	}
</script>

<style lang="scss">
	.add-address-box {
		padding: 0 15px;
		height: 360px;

		.u-list-item {
			margin: 15px 0;
			font-size: 22px;
			border-bottom: 2px solid #EBECED;
			height: 40px;

			.item {
				display: flex;

				.u-icon {
					width: 28px;
					flex-shrink: 0；
				}

				.address {
					margin-left: 10px;
				}

				.right {
					position: absolute;
					right: 0;
				}

				.middle {
					color: #9098A0;
				}
			}

		}
	}

	.placeholder {
		font-size: 18px;
	}

	.u-button {
		margin-bottom: 20px;
	}
</style>
